<style rel="stylesheet/scss" lang="scss" >
.pro-gzq-home-contact{
    background: #f5f7fe;
    .content-box{
        .searchbar{
            padding: 10px 20px 0 20px;
            color: #6a7794;
            font-size: 14px;
            line-height: 30px;
            .jeicon-user-department{
                font-size: 14px;
            }
            .dept-input{
                cursor: pointer;
                margin-right:10px;
                input{
                    cursor: pointer;
                }
            }
            .search{
                color:#2f6bcf;
                cursor: pointer;
                margin-left: 10px;
            }
        }
        .list-item{
            padding: 8px;
            border-radius: 8px;
            margin-bottom: 10px;
            background: #fff;
            border: 1px solid #f2f2f2;
            padding-left: 70px;
            position: relative;
            .info{
                line-height:24px;
                color:#666666;
                &>span{
                    margin-right:30px;
                    i{
                        color:#ababab;
                    }
                }

            }
            .photo{
                position: absolute;
                top: 12px;
                left: 10px;
                border-radius: 100%;
                .je-user-photo{
                    cursor: auto;
                }
            }
        }
    }
}
</style>
<template>
  <div class="pro-gzq-home-contact">
    <div
      v-show="!visible"
      @click="setVisible(true)"
      class="empty-box"
    >
      <i class="jeicon jeicon-signing" />
      {{ $t('_tools.tijiaotongxunlu') }}...
    </div>
    <div
      v-show="visible"
      class="content-box"
    >
      <div class="searchbar">
        {{ $t('_tools.dept') }}：<el-input
          ref="dept"
          v-model="dept.text"
          @clear="load"
          @focus="handleDept"
          @input="inputChange($event)"
          class="dept-input"
          size="mini"
          style="width:200px;"
          suffix-icon="jeicon jeicon-user-department"
          clearable
        />
        {{ $t('_tools.name') }}：<el-input
          ref="user"
          v-model="keyword"
          @keyup.enter.native="load"
          @clear="load"
          @input="inputChange($event)"
          size="mini"
          style="width:200px;"
          clearable
        />
        <span
          @click="load"
          class="search"
        >{{ $t('_tools.search') }}</span>
      </div>
      <!-- 列表 -->
      <je-listview
        ref="list"
        v-loading="loading"
        :total-count="totalCount"
        :page-size="5"
        :empty-height="180"
        :item-height="77"
        @buildData="buildData"
      >
        <div
          slot="listitem"
          v-for="(item,index) of data"
          :key="index"
          class="list-item"
        >
          <div
            v-html="getUserPhoto(item)"
            class="photo"
          />
          <div class="info">
            <span v-html="formatKeyword(item.USERNAME) || $t('_tools.unknown')" />
            <span>{{ item.DEPTNAME || $t('_tools.unknown') }}</span>
            <span>{{ item.EXECUTIVENAME || $t('_tools.unknown') }}</span>
          </div>
          <div class="info">
            <span> <i class="jeicon jeicon-mobile" />
              {{ item.USERCODE || $t('_tools.unknown') }}</span>
            <span><i class="jeicon jeicon-telephone-circle-o" />
              {{ item.ZUOJI || $t('_tools.unknown') }}</span>
            <span><i class="jeicon jeicon-envelope-o" />
              {{ item.COMPANYEMAIL || $t('_tools.unknown') }}</span>
          </div>
        </div>
      </je-listview>
    </div>
  </div>
</template>

<script>
import VueI18n from 'vue-i18n';
import Cookies from 'js-cookie';
import ListView from '../../../../components/listview/listview';
import Util from '../../util/util.js';

export default {
  name: 'Contact',
  components: { 'je-listview': ListView },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      totalCount: 0,
      visible: this.visible,
      loading: true,
      user: '',
      keyword: '',
      dept: {},
      data: [],
    };
  },
  mounted() {
    if (Cookies.get('je-local-lang')) {
      this.$i18n.locale = Cookies.get('je-local-lang');
    } else {
      Cookies.set('je-local-lang', this.$i18n.locale);
    }
    this.load();
  },
  methods: {
    inputChange(e) {
      this.$forceUpdate();
    },
    setVisible(visible) {
      this.$emit('setVisible', visible);
    },
    formatKeyword(text) {
      const keyword = this.user;
      return Util.formatKeyword(text, keyword);
    },
    // 选择部门
    handleDept() {
      const me = this;
      if (me.loading) { return; }
      JE.selectWin({
        title: this.$i18n.locale == 'zh_CN' ? '部门' : 'Department',
        configInfo: 'JE_RBAC_DEPARTMENT,,,S',
        type: 'tree',
        valueType: 'id',
        value: me.dept.id,
        callback: (sels, oldVal, sswin) => {
          const dept = sels[0];
          if (dept) {
            me.dept = {
              ids: [],
              text: dept.get('text'),
            };
            const node = sswin.down('jetreeview').store.getById(dept.get('id'));
            node.cascadeBy((n) => {
              me.dept.ids.push(n.get('id'));
            });
          } else {
            me.dept = {};
          }
          me.load();
        },
      });
    },
    /**
     * 获得分页信息
     */
    getList() {
      return this.$refs.list;
    },
    /**
     * 查询参数
     */
    getParams() {
      const pageInfo = this.getList().getPageInfo();
      const params = {
        tableCode: 'JE_CORE_ENDUSER',
        start: pageInfo.start,
        limit: pageInfo.limit,
        // whereSql :"AND ZHID='"+JE.USER.zhId+"' "
        whereSql: '',
      };
      if (JE.isNotEmpty(this.dept.text)) {
        params.whereSql += ` AND DEPTID in ('${this.dept.ids.join("','")}')`;
      } else {
        this.dept = {};
      }
      if (JE.isNotEmpty(this.user)) {
        params.whereSql += ` AND USERNAME LIKE '%${this.user}%'`;
      }
      return params;
    },
    load() {
      this.user = this.keyword;
      this.getList().load();
    },
    buildData() {
      const me = this;
      me.loading = true;
      JE.ajax({
        url: '/je/portal/homePortal/loadUserAddress',
        params: me.getParams(),
        async: true,
        success(response) {
          const data = JE.getAjaxData(response);
          me.data = data.rows;
          me.totalCount = data.totalCount;
          me.loading = false;
          setTimeout(() => {
            me.$refs.dept.blur();
            me.$refs.user.blur();
          }, 10);
        },
      });
    },
    // 用户头像
    getUserPhoto(item) {
      return JE.getUserPhoto(item.USERID, true);
    },
  },
};
</script>
